<template>
  <!-- 使用 el-row 表示父元素的一整行 -->
  <el-row class="item">
      <!-- 使用 el-col 表示一行中的数据格(用span指定占用多少单元格) -->
      <el-col :span="2" class="ordinal">{{ ordinal }}</el-col>
      <el-col :span="8">{{ item.name }}</el-col>
      <el-col :span="3" class="price">{{ item.price }}</el-col>
      <el-col :span="5" class="amount">
          <amount-view :amount="item.amount" 
                       @数量减少="decrease(item.id)" 
                       @数量增加="increase(item.id)"
                       @数量更改="changeAmount">
          </amount-view>
      </el-col>
      <el-col :span="3" class="subtotal">{{ item.price * item.amount }}</el-col>
      <el-col :span="3" class="operation">
          <!-- 通过 v-on 为按钮绑定点击(click)事件监听器 -->
          <el-button type="primary" size="small" @click="handleRemove">删除</el-button>
      </el-col>
  </el-row>
</template>

<script>
import AmountView from '@/components/AmountView.vue';

export default {
    name: 'ItemView',
    props: {
        ordinal: {
            type: Number,
            required: true
        },
        item: {
            type: Object,
            required: true
        },
        decrease: {
            type: Function,
            required: true
        },
        increase: {
            type: Function,
            required: true
        },
        modify: {
            type: Function,
            required: true
        }
    },
    methods: {
        handleRemove(){
            console.log( '即将被删除的购物车项的编号: ' , this.item.id );
            // 触发`删除`事件 (`删除`是事件名称，在父组件中通过 `@删除="listener"` 形式监听)
            this.$emit( "删除" , this.item.id );
        },
        changeAmount( count ){
            console.log( `子组件通过自定义事件传递的数据: ${count}` );
            // 调用由当前组件(ItemView)的父组件(CartView)通过 attribute 传递的函数
            this.modify( this.item.id , count );
        }
    },
    components: {
        'amount-view': AmountView
    }
}
</script>

<style>
.item {
    margin: 0 10px;
    border-bottom: 1px solid #fff;
    line-height: 30px;
}
.ordinal {
    text-align: center;
}
.price {
    text-align: center;
}
.amount {
    text-align: center;
}
.subtotal {
    text-align: right;
}
.operation {
    text-align: center;
}
</style>